<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>播放器</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #333;
			display: flex;
			flex-direction: column;
			min-height: 100vh;
		}

		.wrapper {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
		}

		#player {
			width: 100%;
			height: 80vh;
		}

		.playlist {
			background: linear-gradient(to bottom right, #ff6666, #ffcc66);
			padding: 20px;
			border-radius: 10px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			margin-top: 20px;
			/* max-height: 20vh;
			overflow-y: auto; */
		}

		.playlist h2 {
			margin: 0;
			margin-bottom: 10px;
			font-size: 20px;
			text-align: center;
		}

		.playlist ul {
			list-style: none;
			margin: 0;
			padding: 0;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 10px;
		}

		.playlist li {
			background-color: rgba(255, 255, 255, 0.8);
			padding: 10px;
			border-radius: 5px;
			text-align: center;
			cursor: pointer;
			transition: background-color 0.3s ease;
		}

		.playlist li:hover {
			background-color: #f1f1f1;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<video id="player" controls></video>
		<div class="playlist">
			<h2>播放列表</h2>
			<ul>
				<li onclick="changeVideo('http://120.196.232.19:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226737/1.m3u8');">CCTV1</li>
				<li onclick="changeVideo('http://120.196.232.54:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226739/1.m3u8');">CCTV2</li>
				<li onclick="changeVideo('http://120.196.232.50:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226720/1.m3u8');">CCTV3</li>
				<li onclick="changeVideo('http://120.196.232.27:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226725/1.m3u8');">CCTV4</li>
				<li onclick="changeVideo('http://120.196.232.31:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226731/1.m3u8');">CCTV5</li>
				<li onclick="changeVideo('http://120.196.232.51:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226711/1.m3u8');">CCTV5+</li>
				<li onclick="changeVideo('http://120.196.232.25:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226699/1.m3u8');">CCTV6</li>
				<li onclick="changeVideo('http://120.196.232.31:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226721/1.m3u8');">CCTV7</li>
				<li onclick="changeVideo('http://120.196.232.17:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226715/1.m3u8');">CCTV8</li>
				<li onclick="changeVideo('http://120.196.232.36:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226651/1.m3u8');">CCTV9</li>
				<li onclick="changeVideo('http://120.196.232.27:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226708/1.m3u8');">CCTV10</li>
				<li onclick="changeVideo('http://120.196.232.55:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226714/1.m3u8');">CCTV11</li>
				<li onclick="changeVideo('http://120.196.232.51:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226723/1.m3u8');">CCTV12</li>
				<li onclick="changeVideo('http://120.196.232.21:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226717/1.m3u8');">CCTV13</li>
				<li onclick="changeVideo('http://120.196.232.27:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226645/1.m3u8');">CCTV14</li>
				<li onclick="changeVideo('http://120.196.232.38:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226648/1.m3u8');">CCTV15</li>
				<li onclick="changeVideo('http://120.196.232.15:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226825/1.m3u8');">CCTV16</li>
				<li onclick="changeVideo('http://120.196.232.43:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226727/1.m3u8');">CCTV17</li>
				<li onclick="changeVideo('http://live.cgtn.com/1000/prog_index.m3u8');">CGTN</li>
				<li onclick="changeVideo('https://livefr.cgtn.com/1000f/prog_index.m3u8');">CGTN法语</li>
				<li onclick="changeVideo('https://livees.cgtn.com/1000e/prog_index.m3u8');">CGTN西语</li>
				<li onclick="changeVideo('https://livear.cgtn.com/1000a/prog_index.m3u8');">CGTN阿语</li>
				<li onclick="changeVideo('http://news.cgtn.com/resource/live/russian/cgtn-r.m3u8');">CGTN俄语</li>
				<li onclick="changeVideo('https://livedoc.cgtn.com/1000d/prog_index.m3u8');">CGTN记录</li>
				<li onclick="changeVideo('http://113.207.84.197/session/3b760ad6-8b9c-11ee-94c9-5254004d191c$h1.0$live.cbncdn.cn/pj9p9p/__cl/cg:live/__c/chcdzdyHD/__op/default/__f/index.m3u8?token=f4dffd3a2f9f0c450629885a20e1f6d8_1701006831_1701006831');">CHC动作</li>
				<li onclick="changeVideo('http://113.207.84.197/session/89ab9c16-8b9c-11ee-94c9-5254004d191c$h1.0$live.cbncdn.cn/pj9p9p/__cl/cg:live/__c/chcjtyyHD/__op/default/__f/index.m3u8?token=4a0eb874b273bfcef008d00a2d5cfb31_1701001923_1701001923');">CHC家挺</li>
				<li onclick="changeVideo('http://113.207.84.199/session/941ecaa4-8b9e-11ee-83eb-5254006225bb$h1.0$live.cbncdn.cn/pj9p9p/__cl/cg:live/__c/chcgqdyHD/__op/default/__f/index.m3u8?token=30f58ff1605971ce57e63ef654ac1937_1701002179_1701002179');">CHC高清</li>
				<li onclick="changeVideo('http://120.196.232.43:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226698/1.m3u8');">湖南卫视</li>
				<li onclick="changeVideo('http://hw-m-l.cztv.com/channels/lantian/channel01/360p.m3u8');">浙江卫视</li>
				<li onclick="changeVideo('http://120.196.232.54:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226734/1.m3u8');">东方卫视</li>
				<li onclick="changeVideo('http://120.196.232.15:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226692/1.m3u8');">江苏卫视</li>
				<li onclick="changeVideo('http://120.196.232.45:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226655/1.m3u8');">安徽卫视</li>
				<li onclick="changeVideo('http://120.196.232.28:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226680/1.m3u8');">重庆卫视</li>
				<li onclick="changeVideo('http://120.196.232.46:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226719/1.m3u8');">北京卫视</li>
				<li onclick="changeVideo('http://120.196.232.41:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226686/1.m3u8');">天津卫视</li>
				<li onclick="changeVideo('http://120.196.232.21:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226689/1.m3u8');">辽宁卫视</li>
				<li onclick="changeVideo('http://120.196.232.38:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226682/1.m3u8');">江西卫视</li>
				<li onclick="changeVideo('http://120.196.232.24:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226716/1.m3u8');">黑龙江卫视</li>
				<li onclick="changeVideo('http://l1.weihai.tv:8081/hls/oK0gP1n8es.m3u8');">山东卫视</li>
				<li onclick="changeVideo('http://120.196.232.52:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226709/1.m3u8');">云南卫视</li>
				<li onclick="changeVideo('http://120.196.232.18:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226659/1.m3u8');">四川卫视</li>
				<li onclick="changeVideo('https://pluslive.kangbatv.com/1/playlist.m3u8?auth_key=1700926645-0-0-256a1f1fbf423bd52f3c95be1b3ca9f8');">康巴卫视</li>
				<li onclick="changeVideo('http://120.196.232.29:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226668/1.m3u8');">河南卫视</li>
				<li onclick="changeVideo('http://cfss.cc/api/ysp/gdws.m3u8');">广东卫视</li>
				<li onclick="changeVideo('http://120.196.232.36:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226688/1.m3u8');">深圳卫视</li>
				<li onclick="changeVideo('http://120.196.232.55:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226713/1.m3u8');">湖北卫视</li>
				<li onclick="changeVideo('http://120.196.232.29:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226670/1.m3u8');">东南卫视</li>
				<li onclick="changeVideo('http://120.196.232.41:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226695/1.m3u8');">厦门卫视</li>
				<li onclick="changeVideo('http://live6.fjtv.net/haixiapd/playlist.m3u8?_upt=a9b18ac61700928793');">海峡卫视</li>
				<li onclick="changeVideo('http://120.196.232.55:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226684/1.m3u8');">河北卫视</li>
				<li onclick="changeVideo('http://120.196.232.25:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226671/1.m3u8');">吉林卫视</li>
				<li onclick="changeVideo('http://120.196.232.54:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226681/1.m3u8');">广西卫视</li>
				<li onclick="changeVideo('http://120.196.232.19:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226704/1.m3u8');">山西卫视</li>
				<li onclick="changeVideo('http://120.196.232.55:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226707/1.m3u8');">陕西卫视</li>
				<li onclick="changeVideo('http://120.196.232.39:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226685/1.m3u8');">内蒙古卫视</li>
				<li onclick="changeVideo('http://120.196.232.45:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226691/1.m3u8');">宁夏卫视</li>
				<li onclick="changeVideo('http://120.196.232.44:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226710/1.m3u8');">西藏卫视</li>
				<li onclick="changeVideo('http://120.196.232.47:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226662/1.m3u8');">甘肃卫视</li>
				<li onclick="changeVideo('http://120.196.232.25:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226679/1.m3u8');">海南卫视</li>
				<li onclick="changeVideo('http://120.196.232.23:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226672/1.m3u8');">贵州卫视</li>
				<li onclick="changeVideo('http://120.196.232.47:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226696/1.m3u8');">青海卫视</li>
				<li onclick="changeVideo('http://120.196.232.38:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226661/1.m3u8');">兵团卫视</li>
				<li onclick="changeVideo('https://pullsstv90080111.ssws.tv/live/SSTV20220729.m3u8');">三沙卫视</li>
				<li onclick="changeVideo('http://223.109.210.41/1301-tx.otvstream.otvcloud.com/otv/skcc/live/channel52003/2300.m3u8');">凤凰中文</li>
				<li onclick="changeVideo('http://223.109.210.41/1301-tx.otvstream.otvcloud.com/otv/skcc/live/channel52002/index.m3u8');">凤凰资讯</li>
				<li onclick="changeVideo('https://rthktv32-live.akamaized.net/hls/live/2036819/RTHKTV32/stream5/streamPlaylist.m3u8');">香港32台</li>
				<li onclick="changeVideo('http://61.10.2.141/live_freedirect/freehd209_h.live/playlist.m3u');">香港有线新闻</li>
				<li onclick="changeVideo('https://piccpndali.v.myalicdn.com/audio/xianggangweishi_2.m3u8');">香港卫视</li>
				<li onclick="changeVideo('https://nhkwlive-ojp.akamaized.net/hls/live/2003459/nhkwlive-ojp-en/index.m3u8');">香港开电视</li>
				<li onclick="changeVideo('http://198.16.100.90:8278/ftvtaiwan_twn/playlist.m3u8?tid=MDFD8196635981966359&ct=19226&tsum=b82639ac8b4590b4206effe348e2f9c2');">民视台湾</li>
				<li onclick="changeVideo('http://198.16.100.90:8278/sanlitaiwan/playlist.m3u8?tid=m92ccadc4dc3718157816&ct=17874&tsum=3570a8198ca0fb7ebb803807e38b33fb');">三立台湾</li>
				<li onclick="changeVideo('http://198.16.100.90:8278/axn_twn/playlist.m3u8?tid=m1776995e9b3e16458394&ct=17874&tsum=b8a111d0b13c7761ce8b4e8f047adddb');">AXN台湾</li>
				<li onclick="changeVideo('http://198.16.100.90:8278/zhongshinews_twn/playlist.m3u8?tid=MD8D4836803548368035&ct=19226&tsum=a2f06c15a5e9c4dc67565c2b8598c8da');">中视新闻</li>
				<li onclick="changeVideo('https://pulltv2.wanfudaluye.com/live/tv2.m3u8');">大爱1台</li>
				<li onclick="changeVideo('http://amdlive.ctnd.com.edgesuite.net/arirang_1ch/smil:arirang_1ch.smil/playlist.m3u8');">阿里郎</li>
				<li onclick="changeVideo('http://113.207.84.199/session/bcdc4b3c-8bae-11ee-8422-525400dfb345$h1.0$live.cbncdn.cn/pj9p9p/__cl/cg:live/__c/yxfyHD/__op/default/__f/index.m3u8?token=3b6026f590b4a6a4f8a277671b715b64_1701013813_1701013813');">游戏风云</li>
				<li onclick="changeVideo('http://bp-caster.bestv.com.cn/494/1/video.m3u8');">电影台9</li>
				<li onclick="changeVideo('http://tc-tct.douyucdn2.cn/dyliveflv1a/20415rnWbjg6Ex1K_2000.flv?wsAuth=c357f68d7199827c89663777da40c4ee&token=cpn-androidmpro-0-20415-b6774b3b3249db1798811cfe5c393414bcc73f076e3a65fa&logo=0&expire=0&did=d010b07dcb997ada9934081c873542f0&origin=tct&vhost=play2');">斗鱼电影19</li>
				<li onclick="changeVideo('http://tc-tct.douyucdn2.cn/dyliveflv1/85894rmovieChow_2000p.flv?wsAuth=f149db0a268e17b462c4032f715fc551&token=cpn-androidmpro-0-85894-a3575d938a4aa30976aaee9c53a07043e9aa8ec98785781a&logo=0&expire=0&did=d010b07dcb997ada9934081c873542f0&origin=tct&vhost=play1');">斗鱼02</li>
				<li onclick="changeVideo('http://tc-tct.douyucdn2.cn/dyliveflv1a/3637778raLSXdOdu_2000.flv?wsAuth=2413f01fb8568523b11a1fd79a98f906&token=cpn-androidmpro-0-3637778-8c089871434b93440d1eca0ac992619a50d6485ebb31150f&logo=0&expire=0&did=d010b07dcb997ada9934081c873542f0&origin=tct&vhost=play2');">斗鱼18</li>
				<li onclick="changeVideo('http://anren.live/HK/BiIOU11uLA.m3u8');">澳门莲花</li>
				<li onclick="changeVideo('https://cloudvideo.servers10.com:8081/8130/index.m3u8');">超级电影</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>
				<li onclick="changeVideo('video10.m3u8');">CCTV10</li>

			</ul>
		</div>
	</div>
	<script src="https://laoxiaoyao.gitee.io/hls.js"></script>
	<script>
		const player = document.getElementById('player');

		if (Hls.isSupported()) {
			const hls = new Hls();
			hls.loadSource('video1.m3u8');
			hls.attachMedia(player);
			hls.on(Hls.Events.MANIFEST_PARSED, () => {
				player.play();
			});
		} else if (player.canPlayType('application/vnd.apple.mpegurl')) {
			player.src = 'video1.m3u8';
			player.addEventListener('loadedmetadata', () => {
				player.play();
			});
		}

		function changeVideo(src) {
			if (Hls.isSupported()) {
				const hls = new Hls();
				hls.loadSource(src);
				hls.attachMedia(player);
				hls.on(Hls.Events.MANIFEST_PARSED, () => {
					player.play();
				});
			} else if (player.canPlayType('application/vnd.apple.mpegurl')) {
				player.src = src;
				player.addEventListener('loadedmetadata', () => {
					player.play();
				});
			}
		}
	</script>
</body>
</html>
